<template>
  <div class="flex fixed b0 w100 bt1 just-between align-center tabbar">
    <router-link 
      tag="div" 
      class="flex1 flex flex-column just-center" 
      v-for="(item,index) in list" 
      :key="index"
      :to="item.path"
      >
      
      <van-icon size="30" 
        :color="$route.path === item.path ? activeColor : color" 
        :name="$route.path === item.path ? item.activeIcon : item.icon" />
      <!-- {{}} -->
      <p>{{item.text}}</p>
    </router-link>
  </div>
</template>
<!-- 
  $route.path: 当前路由的路径
 -->
<script>
export default {
  data () {
    return {
      list: [
        {
          icon: 'wap-home-o',
          activeIcon: 'wap-home',
          text: '首页',
          path: '/'
        }, {
          icon: 'bag-o',
          text: '分类',
          activeIcon: 'bag',
          path: '/type'
        }
        , {
          icon: 'smile-comment-o',
          activeIcon: 'smile-comment',
          text: '米圈',
          path: '/mi'
        }, {
          icon: 'shopping-cart-o',
          activeIcon: 'shopping-cart',
          text: '购物车',
          path: '/shop'
        }
        , {
       
          icon: 'friends-o',
          activeIcon: 'friends',
          text: '我的', 
          path: '/my'
        }
      ],
      color: '#999',
      activeColor: '#ff6700'
    }
  }
}
</script>

<style scoped>
  .tabbar{
    height: 60px;
    background: #fff;
  }
  p{
    font-size: 13px;
    color: #999;;
  }
</style>